<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>选择城市</title>
    <!-- vue -->
    <script src="../common/js/vue2.js"></script>
    <!-- 引入http-vue-loader -->
    <script src="../common/js/vueLoader.js"></script>
    <!-- 引入样式vant -->
    <script src="../common/ui/vant-ui/ui.js"></script>
  </head>
  <body>
    <div id="app">
      <main-top></main-top>
      <div class="mainCenter">
        <div class="leftContent">
          <top close="true" btitle="选择城市" class="ndis500"></top>
          <div class="pd20 content">
            <van-index-bar :sticky="false" v-for="(i,index) in city" :key="index">
              <van-index-anchor :index="i.name" />
              <div class="fs18 fwb mgt20">{{ i.name }}</div>
              <div class="flex">
                <div class="flex fww">
                  <span v-for="j in i.cityName" class="tag">{{ j }}</span>
                </div>
              </div>
            </van-index-bar>
          </div>
        </div>
        
        <lan-adright></lan-adright>
      </div>
      <main-footer></main-footer>
    </div>
  </body>
</html>
<script>
  Vue.use(httpVueLoader);
  new Vue({
    el: "#app",
    data: {
      city: [
        {
          name: "热门城市",
          cityName: [
            "新疆维吾尔自治区",
            "新疆维吾尔自治区",
            "新疆维吾尔自治区",
            "新疆维吾尔自治区",
            "新疆维吾尔自治区",
            "新疆维吾尔自治区",
          ],
        },
        {
          name: "A",
          cityName: [
            "阿鲁巴",
            "阿鲁巴",
            "阿鲁巴",
            "阿鲁巴",
            "阿鲁巴",
            "阿鲁巴",
            "阿鲁巴",
          ],
        },
        { name: "B", cityName: ["北京"] },
        { name: "C", cityName: ["ccc"] },
        { name: "D", cityName: ["大地"] },
        { name: "E", cityName: ["饿了么饿了么"] },
      ],
    },
    components: {
      top: httpVueLoader("../common/commpent/top.vue"),
      "main-top": httpVueLoader("../common/commpent/main/workTop.vue"),
      "main-footer": httpVueLoader("../common/commpent/main/mainFooter.vue"),
      "lan-adright": httpVueLoader("../common/commpent/lan/adRight.vue"),
    },
    methods: {},
  });
</script>
<style>
  body {
    background-color: #fff;
  }
  .content {
    position: relative;
  }
  .zmIndex {
    position: fixed;
    right: 20px;
    color: #13ce3c;
    line-height: 20px;
  }
  .fs30 {
    font-size: 30px;
  }
  .van-index-bar__sidebar{
    /* display: none; */
    position: absolute;
  }
  @media (max-width: 500px) {
    .ndis500 {
      display: block;
    }
    .van-index-bar__sidebar {
      position: fixed;
      right: 0;
      display: flex;
      flex-direction: column;
    }
  }
</style>
